<template>
  <div class="w">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <span class="title">报修登记</span>
    </div>
    <div class="info">
      <div class="form">
        <el-form ref="repairRef" :model="repairForm" :rules="repairRules">
          <el-form-item prop="repairName" label="报修人">
            <el-input v-model="repairForm.repairName" clearable placeholder="请输入姓名" class="input"></el-input>
          </el-form-item>
          <el-form-item prop="repairPhone" label="联系方式">
            <el-input v-model="repairForm.repairPhone" placeholder="请输入联系方式" clearable="" class="input"></el-input>
          </el-form-item>
          <el-form-item prop="repairAddress" label="报修地点">
            <el-input type="textarea" v-model="repairForm.repairAddress" clearable placeholder="请输入报修地点" class="input"></el-input>
          </el-form-item>
          <el-form-item prop="repairText" label="故障描述">
            <el-input type="textarea" v-model="repairForm.repairText" clearable placeholder="请输入故障描述" class="input"></el-input>
          </el-form-item>
          <el-form-item prop="repairImage" label="故障照片">
            <el-upload
              class="upload-demo"
              action="http://localhost:8080/school/image/upload"
              :on-success="uploadSuccess"
              :on-remove="deleteImage"
              style="width: 300px"
              list-type="picture"
              :before-upload="beforeUpload"
              multiple
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3MB</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div class="button">
        <el-button @click="summit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 手机号验证规则
    var checkPhone = (rule, value, cb) => {
      const regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (regPhone.test(value)) {
        return cb();
      }
      cb(new Error('手机号不合法'));
    };
    return {
      repairForm: {
        repairName: '',
        repairPhone: '',
        repairAddress: '',
        repairText: '',
        repairImage: '',
      },
      info: [],
      repairRules: {
        repairName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],

        repairPhone: [
          { validator: checkPhone, trigger: 'blur' },
          { required: true, message: '手机号不能为空', trigger: 'blur' },
        ],

        repairAddress: [{ required: true, message: '地址不能为空', trigger: 'blur' }],

        repairText: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
        repairImage: [],
      },
    };
  },

  created() {
    this.info = JSON.parse(window.localStorage.getItem('userInfo'));
  },

  methods: {
    beforeUpload(file) {
      console.log(file);
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);

      const whiteList = ['jpg', 'png'];

      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error('上传文件只能是 jpg、png 格式');
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isLt2M) {
        return this.$message.error('上传文件大小不能超过 3MB，请选择其他图片');
      }
    },
    back() {
      this.$router.go(-1);
    },
    //接受上传成功的返回的图片名称
    uploadSuccess(reponse) {
      this.repairForm.repairImage = reponse.data;
    },
    //取消上传后删除图片
    async deleteImage() {
      const { data: res } = await this.$http.delete('image/deleteImage/' + this.repairForm.repairImage);
      if (res.code == 1) {
        return this.$message.success(res.data);
      } else {
        return this.$message.error(res.msg);
      }
    },
    summit() {
      this.$refs.repairRef.validate(async (valid) => {
        if (valid) {
          this.repairForm.userName = this.info.name;
          const { data: res } = await this.$http.post('repairOrders/addOrders', this.repairForm);
          if (res.code == 1) {
            this.$message.success(res.data);
            this.$router.go(-1);
          } else {
            return this.$message.error('提交失败');
          }
        } else {
          return this.$message.error('表单校验失败');
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  .header {
    background-color: #fece4e;
    height: 50px;
    color: #fff;
    text-align: center;
    position: relative;
    .icon-fanhui {
      position: absolute;
      font-size: 25px;
      line-height: 50px;
      left: 10px;
      font-weight: bold;
    }
    .title {
      font-size: 20px;
      line-height: 50px;
      font-weight: bold;
    }
  }
  .info {
    height: calc(100vh - 80px);
    overflow: auto;
    padding: 15px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    .form {
      :deep(.el-form-item__label) {
        font-size: 16px;
        color: #222c3a;
        font-weight: 530;
        letter-spacing: 2px;
        height: 35px;
      }
      :deep(.el-form-item) {
        margin-bottom: 15px;
      }
      :deep(.el-textarea__inner) {
        height: 80px;
      }
    }
  }
  .button {
    margin-top: 70px;
    text-align: center;
    :deep(.el-button) {
      height: 50px;
      background-color: #5e7aee;
      border-radius: 50px;
      border: none;
      color: #fefefe;
      width: 100%;
      font-size: 17px;
    }
  }
}
</style>